<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<title>用户登录</title>
<link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap-theme.min.css}" />
<link rel="stylesheet" th:href="@{/static/easyui/themes/bootstrap/easyui.css}">
<link rel="stylesheet" th:href="@{/static/easyui/themes/icon.css}">
<link rel="stylesheet" th:href="@{/static/metisMenu/metisMenu_custom.css}" />
<script th:src="@{/static/jquery/jquery-1.12.4.js}"></script>
<script th:src="@{/static/jquery/jquery.cookie.js}"></script>
<script th:src="@{/static/easyui/jquery.easyui.min.js }"></script>
<script th:src="@{/static/easyui/locale/easyui-lang-zh_CN.js }"></script>
<script th:src="@{/static/easyui/plugins/jquery.tooltip.js }"></script>
<script th:src="@{/static/jqueryValidate/jquery.validate.min.js }"></script>
<script th:src="@{/static/jqueryValidate/additional-methods.min.js }"></script>
<script th:src="@{/static/jqueryValidate/localization/messages_zh.min.js }"></script>
</head>
<style type="text/css">
*{margin: 0;padding:0;font-size:14px;font-family:arial,'微软雅黑';}
html, body {
	width: 100%;
	height: 100%;
}
body{
	overflow:hidden;
}
.login-bg{
	height:100%;	
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:1;
	background: url(../static/imges/login-bg1.png) no-repeat center top;
	background-size:cover;
	
}

@keyframes mymove2 {
  from {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
  to {
    transform: translateX(-20px);
    -webkit-transform: translateX(-20px);
  }
}
@-webkit-keyframes mymove2 {
  from {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
  to {
    transform: translateX(10px);
    -webkit-transform: translateX(-10px);
  }
}
.login_container {
	width: 100%;
	height: 100%;
	position:absolute;
	top:0;
	left:0;
	z-index:20;
	
}



.login_container .login_area {
	box-shadow: 0 0;
	margin-top:35%;
}

table {
	margin: auto;
	color: #fff;
	width: 90%
}

.login_container .login_area .login_table .login_btn_container {
	padding-top: 8px;
}

.login_title_container {
	text-align: center;
	margin-top: 12%;
}
.login_title_container .circle{
	width:128px;
	height:128px;
	border-radius:50%;
	    margin:8% auto 0;
    background: #fff;
}
.login_title_container img {
	width: 108px;
	text-align: center;
}
.login_title_container p{
	font-size: 2rem;
    margin-top: 10px;
    font-weight: bold;
    color: #fff;
}
.username_content>td {
	box-sizing: border-box;
	padding: 10px 0;
}

.username_content img {
	width: 28px;
	height: 28px;
}

input {
	border: 1px solid #fff;
	background: transparent;
	height: 28px;
	line-height: 28px;
	padding: 0 8px;
	display: block;
	width: 100%;
	color:#333;
}

input[type="submit"] {
	width: 280px;
	padding: 5px;
	height: 38px;
	background: #B97ED8;
    background: -moz-linear-gradient(right, #772DE2 0%, #B97ED8 100%);
    background: -webkit-gradient(linear, left, right, color-stop(0%,#772DE2 0%), color-stop(100%,#B97ED8));
    background: -webkit-linear-gradient(right, #772DE2 0%,#B97ED8 100%);
    background: -o-linear-gradient(right, #772DE2 0%,#B97ED8 100%);
    background: -ms-linear-gradient(right, #772DE2 0%,#B97ED8 100%);
    background: linear-gradient(to right, #772DE2 0%,#B97ED8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#772DE2', endColorstr='#B97ED8',GradientType=1 );
	font-size: 16px;
	border:0;
	margin: auto;
	color:#fff;
}

.error {
	color: red;
}

.user-icon {
	position: relative;
	padding: 0 10px 8px 48px;
	border-bottom: 1px solid #ddd;
	height: 37px;
}

.user-icon:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 10px;
	width: 28px;
	height: 28px;
	background: url(../static/imges/username.png) no-repeat center;
	background-size: 28px;
}

.user-icon.pass:before {
	background: url(../static/imges/userpassword.png) no-repeat center;
	background-size: 28px;
}

.user-icon.mobile:before {
	background: url(../static/imges/phone.png) no-repeat center;
	background-size: 32px;
}
</style>

<body>
	<div class="login-bg">
	<div></div>
	</div>
	<div class="login_container">
	<div class="login_title_container">
		<div class="circle">
		
								<img src="../static/imges/logo1.png" />
							</div>
							<p>施工管理平台</p>
							
							
		<div class="login_area">
			<form id="login_form" method="post" action="../app/login.do">
				<table class="login_table">
					<tr colspan="2" class="username_content">
						<td class="login_input_container">
							<div class="user-icon">
								<input id="username" name="username"  type="text" th:text="${username}" />
							</div>
						</td>
					</tr>
					<!-- <tr colspan="2" class="username_content">
						<td class="login_input_container">
							<div class="user-icon">
								<input id="mobile" name="mobile"  type="text" th:text="${username}" />
							</div>
						</td>
					</tr> -->
					<tr colspan="2" class="password_content">
						<td class="login_input_container">
							<div class="user-icon pass">
								<input id="password" name="password"  type="password" th:text="${password}" />
							</div>
						</td>
					</tr>
					
					<tr>
						<td colspan="2" class="login_btn_container">
							<input class="login_btn" type="submit" onclick="saveUserInfo()" value="登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录" />
						</td>
					</tr>
					<tr>
						<td colspan="2" class="text-center">
							<label class="error" th:text="${err_msg}"></label>
						</td>
					</tr>
				</table>
			</form>
		</div>
		</div>
	</div>
</body>
<script>
	jQuery(document).ready(function() {
		if ($.cookie("rmbUser") == "true"){
			$("#rmbUser").attr("checked", "checked");
			$("#username").val($.cookie("username"));
			$("#password").val($.cookie("password"));
		}
	});
	function saveUserInfo() {
		if ($("#rmbUser").attr("checked") == "checked"){
			var username = $("#username").val();
			var password = $("#password").val();
			$.cookie("rmbUser", "true", {
				expires : 7
			}); // 存储一个带7天期限的 cookie
			$.cookie("username", username, {
				expires : 7
			}); // 存储一个带7天期限的 cookie
			$.cookie("password", password, {
				expires : 7
			}); // 存储一个带7天期限的 cookie
		}else{
			$.cookie("rmbUser", "false", {
				expires : -1
			}); // 删除 cookie
			$.cookie("username", '', {
				expires : -1
			});
			$.cookie("password", '', {
				expires : -1
			});
		}
	}
</script>

</html>